<template>
  <v-menu
    offset-y
    left
    nudge-bottom="14"
    min-width="230"
    content-class="user-profile-menu-content"
  >
    <template v-slot:activator="{ on, attrs }">
<!--      <v-badge-->
<!--        bottom-->
<!--        color=""-->
<!--        overlap-->
<!--        offset-x="12"-->
<!--        offset-y="12"-->
<!--        class="ms-4"-->
<!--        dot-->
<!--      >-->
        <v-avatar
            class="ms-4"
          v-if="avatar !== null"
          size="40px"
          v-bind="attrs"
          v-on="on"
        >
          <v-img :src="avatar"></v-img>
        </v-avatar>
        <v-avatar
            class="ms-4"
            v-else
            size="40px"
            color="#E0E0E0"
            v-bind="attrs"
            v-on="on"
        >
          {{ username.substr(0, 2).toUpperCase() }}
        </v-avatar>
<!--      </v-badge>-->
    </template>
    <v-list v-if="hasLogin">
      <div class="pb-3 pt-2">
        <v-badge
          bottom
          color="success"
          overlap
          offset-x="12"
          offset-y="12"
          class="ms-4"
          dot
        >
          <v-avatar v-if="avatar !== null" size="40px">
            <v-img :src="avatar"></v-img>
          </v-avatar>
          <v-avatar v-else size="40px" color="#E0E0E0">
            {{ username.substr(0, 2).toUpperCase() }}
          </v-avatar>
        </v-badge>
        <div
          class="d-inline-flex flex-column justify-center ms-3"
          style="vertical-align:middle"
        >
          <span class="text--primary font-weight-semibold mb-n1">
            {{ username }}
          </span>
          <small class="text--disabled text-capitalize">{{ identity }}</small>
        </div>
      </div>

      <v-divider></v-divider>

      <!-- Profile -->
      <v-list-item link :href="'/profile/' + scholar">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiAccountOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>学术主页</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <!-- Email -->
      <v-list-item link href="/notification">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiEmailOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>系统通知</v-list-item-title>
        </v-list-item-content>

        <!-- <v-list-item-action>
          <v-badge
            inline
            color="error"
            content="2"
          >
          </v-badge>
        </v-list-item-action> -->

        <v-list-item-action>
          <v-badge
            inline
            color="error"
            :content="notification_num"
            :value="notification_num"
          >
          </v-badge>
        </v-list-item-action>

      </v-list-item>

      <!-- Chat -->
      <v-list-item link href="/personal/chat">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiChatOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>聊天消息</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider class="my-2"></v-divider>

      <!-- Settings -->
      <v-list-item link @click="$router.push({name: 'personal-center'})">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiHomeOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>个人空间</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <!-- Settings -->
      <v-list-item link @click="$router.push({name: 'account-settings'})">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiCogOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>信息设置</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <!-- FAQ -->
      <v-list-item link href="/admin" v-if="identity === 'admin'">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiHelpCircleOutline }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>审核管理</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider class="my-2"></v-divider>

      <!-- Logout -->
      <v-list-item link @click="logout">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiLogoutVariant }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>注销登录</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
    <v-list v-else>
      <div class="pb-3 pt-2">
        <v-badge
            bottom
            color="#BDBDBD"
            overlap
            offset-x="12"
            offset-y="12"
            class="ms-4"
            dot
        >
          <v-avatar v-if="avatar !== null" size="40px">
            <v-img :src="avatar"></v-img>
          </v-avatar>
          <v-avatar v-else size="40px" color="#E0E0E0">
            {{ username.substr(0, 2).toUpperCase() }}
          </v-avatar>
        </v-badge>
        <div
            class="d-inline-flex flex-column justify-center ms-3"
            style="vertical-align:middle"
        >
          <span class="text--primary font-weight-semibold mb-n1">
            {{ username }}
          </span>
          <small class="text--disabled text-capitalize">{{ identity }}</small>
        </div>
      </div>

<!--      <v-divider></v-divider>-->

      <!-- Login -->
      <v-list-item link href="/login">
        <v-list-item-icon class="me-2">
          <v-icon size="22">
            {{ icons.mdiLoginVariant }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>立即登录</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
import {
  mdiAccountOutline,
  mdiEmailOutline,
  mdiCheckboxMarkedOutline,
  mdiChatOutline,
  mdiCogOutline,
  mdiCurrencyUsd,
  mdiHelpCircleOutline,
  mdiLogoutVariant,
  mdiLoginVariant,
  mdiHomeOutline
} from '@mdi/js'
import authorization from "../../api/authorization";
import axios from "axios";

export default {
  data() {
    return {
      hasLogin: false,
      avatar: null,
      username: '游客',
      identity: 'Visitor',
      scholar: '',

      notification_num : 0,
    }
  },
  methods: {
    logout() {
      localStorage.clear();
      window.location.reload(false);
      this.$router.push({path: '/'});
      // this.$forceUpdate();
      this.$notify.success({
        title: '登出成功',
        message: '朋友下次再见哇'
      })
    },
    getProf() {
      const that = this;
      authorization()
          .then(function (response){
            that.hasLogin = response[0];
            if(response[0]){
              axios
                  .get('https://api.dreamhub.moyunbook.xyz/user/' + response[1] + '/')
                  .then(function (response) {
                    console.log(response.data);
                    const data = response.data;
                    that.avatar = data.profile.avatar;
                    that.username = data.username;
                    that.scholar = data.profile.research_id;
                    that.identity = data.profile.identity;
                    localStorage.setItem('userinfo', JSON.stringify(data));
                    // console.log('header ' + that.username);
                  })
                  .catch(function (error){
                    that.$notify.error({
                      title: '好像发生了什么错误',
                      message: error.message
                    })
                  })
            }
          })
          .catch(function (){
              that.$notify.error({
                title: '登录状态失效',
                message: '快去登录'
              })
              that.$router.push({path: '/login'});
          })
    },
    getNotification() {
      const that = this;
      authorization()
          .then(function (response){
            that.hasLogin = response[0];
            if(response[0]){
              axios.get(
                  '/api/notification/user/',
                  {
                    headers: {
                      Authorization: 'Bearer ' + localStorage.getItem('access')
                    },
                  },
              )
                  .then(
                      (response) => {
                        console.log(response.data);
                        let list = response.data;
                        for( let i=0 ; i< list.length ; i++ ) {
                          if(list[i].is_read === false) {
                            that.notification_num ++;
                          }
                        }
                      }
                  )
            }
          })
          .catch(function (){
            that.$notify.error({
              title: '登录状态失效',
              message: '快去登录'
            })
            that.$router.push({path: '/login'});
          })
    },
  },
  setup() {
    return {
      icons: {
        mdiAccountOutline,
        mdiEmailOutline,
        mdiCheckboxMarkedOutline,
        mdiChatOutline,
        mdiCogOutline,
        mdiCurrencyUsd,
        mdiHelpCircleOutline,
        mdiLogoutVariant,
        mdiLoginVariant,
        mdiHomeOutline
      },
    }
  },
  created() {
    this.getProf();
    this.getNotification();
  }
}
</script>

<style lang="scss">
.user-profile-menu-content {
  .v-list-item {
    min-height: 2.5rem !important;
  }
}
</style>
